<html>
<head>
  <style>
    body { margin:0; font: 12dip "微软雅黑","宋体","MS Shell Dlg"; }
    div.header 
    {
      height:57dip;  
      background-image: url(images/header.png);
      background-position: 0dip 0dip 4dip 239dip;
      background-repeat: expand stretch-top stretch-middle stretch-right stretch-bottom;
    }
    div.body 
    {
      font: "微软雅黑",system; 
      font-size:12dip;
      line-height:14dip;
      background-image: url(images/body-back.png);
      background-repeat: expand; 
      background-position: 80dip 0 0 0; // top right bottom left offsets/margins
      height:*;  // takes the rest of the view
      padding:25dip 10dip 10dip 10dip;
      flow:horizontal;     // two columns
      border-spacing:10dip; // with 20 dip margin in between
    }
    
    #left { width:20em; }    
    
    div.panel
    {
      background-image: url(images/panel-back.png);
      background-repeat: expand; 
      background-position: 14dip 14dip 14dip 14dip; // top right bottom left offsets/margins
      padding: 0 10dip 10dip 10dip;
      margin-bottom:20dip;
    }
    div.panel > caption
    {
      background-image: url(images/panel-caption-back.png);
      background-repeat: expand stretch-left stretch-middle stretch-right; 
      background-position: 3dip 3dip 3dip 3dip; // top right bottom left offsets/margins
      padding:6dip 6dip;
      color:white;
      font-weight:bold;
      position:relative;
      top:-0.7em;
      margin-bottom:-0.6em;
    }
        
    div.panel :link { text-decoration:none; color:#8b8368; cursor:pointer;assigned!:self.$1(button[name="delete-project"])::display="none"; }
    div.panel :link:hover { color:red; }
    div.panel :link:active { text-decoration:none; }
    div.panel :link:focus { color:orange; }
    div.panel :link:tab-focus { text-decoration:double-underline; }
    div.panel ul { padding: 0 6dip; margin: 10dip 0;line-height:16dip; }
    div.panel li { display:block; margin: 2dip 0; }
    div.panel dl { padding: 0 6dip;line-height:16dip; }
    div.panel dt { font-weight:bold; margin-bottom:4dip; }
    div.panel dt:not(:first-child) { border-top: 1dip dotted #8b8368; margin-top:6dip; padding-top:6dip;}
    div.panel dd { padding-left:12dip;font-size:8pt; }
     
    #recent-projects table { margin:0 auto; }
    #recent-projects table td:first-child { text-align:right; }
    #recent-projects li[name=recent-project-item]{
        context-menu: selector(menu#projectMenu);
    }
    #recent-projects li[name=recent-project-item]:owns-popup{
        font-weight:bold;
        color:red;
    }
    button[name="delete-project"]{
        background:none;
        width:16dip;
        height:16dip;
        padding:0;
    }
    button[name="delete-project"] img{
        margin:0; 
        vertical-align: middle;
    }  
  </style>  
<head>
<script type="text/javascript">  
    function doNothing(){  
        window.event.returnValue=false;  
        return false;  
    }  
</script>  
<body oncontextmenu="doNothing()"> 
  <div .body>
    <div #left>
      <div .panel #recent-projects>
        <caption>最近打开工程</caption>
        <ul #recent-projects-list></ul> 
         <p style="text-align:right;margin-right:10%%" .right>
            <a href="#" name="create-project" #create-project>创建工程</a> 
            <a href="#" name="open-project">打开工程</a></p>
         </p>
      </div>
      <div .panel #getting-started .right>
        <caption>开发指南和文档资源</caption>
        <ul><include src="content/getting-started.htm" /></ul>
      </div> 
    </div>
    <div .panel #msdn-news>
      <caption>官网资讯</caption>
      <dl #start-page-news><img src="images/loading.png" /></dl>
      <p style="text-align:right;margin-right:10%%"><a href="http://bbs.aardio.com/">更多...</a></p>
    </div>
  </div> 
  
<menu.context id="projectMenu">
  <li id="open-project">打开/切换到...</li>
  <li id="open-project-as">在新的开发环境中打开/切换到</li> 
  <li id="explore-project">在资源管理器浏览...</li> 
  <hr/>
  <li id="delete-project">移除记录</li> 
  <li id="delete-project-all">清空记录</li> 

</menu>
</body>
</html>